<template>
	<div>
		<SearchView>
			<template v-slot:title>
				<span>景点/目的地/主题</span>
			</template>
			<template v-slot:right>
				<span>西安</span>
				<van-icon
					class="mp-header-right-text"
					name="arrow-down"
				/>
			</template>
		</SearchView>
		<section class="mp-main">
			<div class="mp-sight">
				<h3 class="mp-caption">必游景点推荐</h3>
				<div class="mp-sight-container">
					<van-swipe
						class="my-swipe"
						indicator-color="#00cabb"
					>
						<van-swipe-item>
							<template>
								<ul class="swiper-item-list">
									<li
										class="swiper-item"
										v-for="item in list"
										@click="
											$router.push({
												path: '/touch',
												query: { id: item.content },
											})
										"
									>
										<a
											href="#"
											class="swiper-item-link"
											@click.prevent=""
										>
											<div class="item-show">
												<img
													width="100%"
													src="https://imgs.qunarzz.com/sight/p0/1411/61/d92ba6a30aa12eb0a9a4a9c82214cb8e.water.jpg_222x168_f520354c.jpg"
													alt=""
												/>
												<span class="item-img-title">{{ item.title }}</span>
											</div>
											<div class="item-name">{{ item.content }}</div>
											<div class="item-ruter">
												<span class="item-ruter-num">{{ item.time }}</span
												><span>条线路</span>
											</div>
										</a>
									</li>
								</ul>
							</template>
						</van-swipe-item>
					</van-swipe>
					<div class="mp-sight-btn">
						<van-button
							type="primary"
							@click.prevent=""
						>
							西安全部一日游
						</van-button>
					</div>
					<div class="mp-topic">
						<h3 class="mp-caption">西安必玩</h3>
						<div class="mp-realtime-order">
							<van-swipe
								style="height: 200px"
								vertical
								autoplay="3000"
							>
								<van-swipe-item
									v-for="el in pinlun"
									:key="el.id"
								>
									<a
										href="#"
										class="mp-realtime-item"
									>
										<div class="mp-realtime-avatar">
											<img
												src="//s.qunarzz.com/piao/image/common/default/avatar40.png"
												data-original-src="https://img1.qunarzz.com/ucenter/portrait/1512/44/898dba1aa58d8340.jpg_r_150x150_ce77e8c1.jpg"
												alt="n*5"
											/>
										</div>
										<div class="mp-realtime-info">
											<div class="mp-realtime-info-inner">
												<strong class="mp-realtime-name">{{ el.name }}：</strong
												>{{ el.content
												}}<span class="mp-realtime-price mp-price"
													>¥<em class="mp-price-num">{{ el.price }}</em></span
												>
											</div>
										</div>
									</a>
								</van-swipe-item>
							</van-swipe>
						</div>
						<div class="mp-topic-container">
							<div class="mp-topic-topleft">
								<ul class="clrfix">
									<li
										class="mp-topic-item"
										v-for="(item, index) in bendi"
										:key="index"
										:class="{
											'topic-border': index <= 2,
											'topic-border-lr': index === 1 || index === 4,
										}"
									>
										<a
											href="#"
											class="mp-topic-link mpg-ellipsis"
											>{{ item }}</a
										>
									</li>
								</ul>
							</div>
						</div>
					</div>

					<div class="mp-nearby">
						<h3 class="mp-caption">附近景点</h3>
						<div class="mp-nearby-container">
							<div class="mp-tap-container">
								<ul class="mp-tab">
									<li
										v-for="item in nearbyTabList"
										:key="item.id"
										@click="currentTap = item.id"
										:class="{
											'mp-tab-item': true,
											'mp-tab-active': currentTap === item.id,
										}"
									>
										<div
											class="mp-tab-name"
											mp-role="nearbyTabName"
										>
											{{ item.city }}
										</div>
										<div class="mp-tab-distance">{{ item.distance }}</div>
									</li>
								</ul>
								<div class="mp-tap-line"></div>
							</div>
							<div class="mp-nearby-content">
								<div class="mp-nearby-swiper">
									<div class="npw-swipe-wrap">
										<div
											class="npw-swipe-item"
											v-for="item in nearbyTabList[currentTap - 1]?.caption"
											:key="item.id"
										>
											<a href="#">
												<div class="np-nearby-show">
													<img
														:src="item.img"
														alt=""
														class="swiper-img"
													/>
												</div>
												<div class="np-nearby-info">
													<div class="np-nearby-name">{{ item.name }}</div>
													<div class="np-nearby-price">
														￥
														<span class="price-text">{{ item.price }}</span
														>起
													</div>
												</div>
											</a>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="mp-route">
						<h3 class="mp-caption">西安热门线路推荐</h3>
						<ul class="mp-route-tag">
							<li
								class="mp-route-tag-unit"
								v-for="item in [
									{
										title: '无自费',
										imgSrc:
											'//s.qunarzz.com/piao/image/touch/daytrip/home/nofee.png',
									},
									{
										title: '无购物',
										imgSrc:
											'//s.qunarzz.com/piao/image/touch/daytrip/home/noshopping.png',
									},
									{
										title: '铁定成团',
										imgSrc:
											'//s.qunarzz.com/piao/image/touch/daytrip/home/tuan.png',
									},
								]"
							>
								<div
									class="mp-route-tag-inner"
									@click="show = true"
								>
									{{ item.title }}
									<img
										style="
											position: absolute;
											right: 0;
											bottom: 0;
											width: 0.62rem;
											height: 0.62rem;
										"
										:src="item.imgSrc"
									/>
								</div>
							</li>
						</ul>
						<div class="mp-route-container">
							<ul class="mp-route-list">
								<li
									class="mp-route-item"
									v-for="item in 6"
								>
									<a
										class="mp-route-link"
										href="#"
									>
										<div class="mp-route-show">
											<img
												src="https://imgs.qunarzz.com/p/tts5/2103/b4/29b672be92414302.jpg_160x160_641829af.jpg"
												alt="【可选长恨歌/晚出发团】兵马俑+华清宫骊山一日游/赠特色早餐/汉服体验/分餐制/深度讲解/无线耳麦"
												style=""
											/>
											<span class="mp-route-intro">
												<em class="mpg-ellipsis mp-route-intro-inner"
													>可订明日</em
												>
											</span>
										</div>
										<div class="mp-route-info">
											<div class="mp-ellipsis2 mp-route-name">
												<img
													width="46"
													class="mp-rote-qplusicon"
													src="https://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20209/e8bdbc1efc0f5747844564895513958f.jpg"
												/>
												【可选长恨歌/晚出发团】兵马俑+华清宫骊山一日游/赠特色早餐/汉服体验/分餐制/深度讲解/无线耳麦
											</div>
											<div class="mp-route-param">
												<strong class="mp-route-score"
													><span class="mp-price-num">5.0</span>分</strong
												>
												<em class="mp-route-count"
													>月销<span class="mp-price-num">2620</span>份</em
												>
											</div>
											<div class="mp-route-departure">出发地：西安</div>
											<div class="mp-route-price">
												<span class="mp-price"
													>¥<em class="mp-price-num">155</em></span
												>起
											</div>
										</div>
									</a>
								</li>
							</ul>
						</div>
					</div>
					<div class="mp-sight-btn">
						<van-button
							type="primary"
							@click.prevent=""
						>
							西安全部一日游
						</van-button>
					</div>
				</div>
			</div>
		</section>
		<div
			class="mp-service"
			v-show="show"
		>
			<h3 class="mp-service-title">服务说明</h3>
			<div class="mp-service-content">
				<div
					class="mp-service-item mp-border-bottom"
					v-for="item in 3"
				>
					<img
						class="mp-service-img"
						src="//s.qunarzz.com/piao/image/touch/daytrip/service1.png"
						style=""
					/>
					<div class="mp-service-info">
						<h4 class="mp-service-subtitle">铁定成团</h4>
						<p class="mp-service-desc">
							铁定成团是指甲方承诺该商品的信息真实有效，一旦网上预定并付款后，不管该团期参团人数多少，肯定会发团，保障消费者可以按时出游。
						</p>
					</div>
				</div>
			</div>
			<div class="mp-service-btn">
				<div
					class="mpg-iconfont"
					@click="show = false"
				>
					✖️
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import SearchView from './component/SearchView.vue';
	import {
		nearbyListApi,
		localApi,
		commentApi,
		nearbyTapApi,
	} from '@/api/zang/oneday';

	export default {
		name: 'OneDay',
		data() {
			return {
				currentTap: 1,
				show: false,

				list: [],

				bendi: [],

				pinlun: [],

				nearbyTabList: [],
			};
		},
		methods: {
			routerList() {},

			async getNearbyList() {
				const res = await nearbyListApi;
				console.log(res);
				this.list = res;
			},

			async getLocalList() {
				const res = await localApi;
				this.bengdi = res;
			},

			async getCommentList() {
				const res = await commentApi;
				this.pinlun = res;
			},

			async getTapList() {
				const res = await nearbyTapApi;
				this.nearbyTabList = res;
			},
		},

		mounted() {
			this.getNearbyList();
			this.getLocalList();
			this.getCommentList();
			this.getTapList();
		},

		components: {
			SearchView,
		},
	};
</script>

<style scoped>
	.mp-main {
		margin: 0.3rem;
		padding-top: 1.28rem;
	}

	.mp-caption {
		color: #212121;
		font-weight: bold;
		font-size: 0.54rem;
		line-height: 0.76rem;
	}

	.mp-sight-group {
		overflow: hidden;
		width: 100%;
	}

	.swiper-item-list {
		display: flex;
		flex-wrap: wrap;
		align-content: center;
		justify-content: space-between;
		row-gap: 0.3rem;
		width: 100%;
		margin-bottom: 16px;
	}

	.swiper-item-list::after {
		content: '';
		width: 5px;
		height: 5px;
		background-color: #00cabb;
		border-radius: 50%;
		margin: 0 0.1rem;
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		background-image: linear-gradient(
			to right,
			rgba(0, 0, 0, 0) 20%,
			rgba(0, 0, 0, 0.8)
		);
	}

	.swiper-item {
		/* background-color: bisque; */
		width: 32%;
		padding-top: 0.2rem;
	}

	.swiper-item-link {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
	}
	.item-show {
		position: relative;
		border-radius: 0.3rem;
		overflow: hidden;
		background-color: #f0f0f0;
		box-shadow: 0 0.04rem 0.12rem 0 rgba(0, 0, 0, 0.2);
	}

	.item-show img {
		border-radius: 0.3rem;
	}

	.item-img-title {
		position: absolute;
		bottom: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.3);
		z-index: 9;
		color: #fff;
		width: 100%;
		text-align: center;
		font-size: 0.3rem;
		line-height: 0.6rem;
	}

	.item-name {
		font-size: 0.36rem;
		font-weight: bold;
		color: black;
		line-height: 2;
	}

	.item-ruter {
		font-size: 0.33rem;
		line-height: 1;
		color: #999;
	}

	.item-ruter-num {
		color: #00cabb;
	}

	.van-button {
		margin-top: 10px;
		width: 100%;
		background-color: #fff;
		color: #00cabb;
		border: 0.02rem solid #95ded5;
		font-size: 0.38rem;
		line-height: 0.8rem;
		margin-bottom: 0.6rem;
		border-radius: 6px;
	}

	.mp-topic {
	}

	.mp-realtime-order {
		overflow: hidden;
		margin-top: 0.12rem;
		height: 1.2rem;
	}

	.mp-realtime-item {
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 0.2rem;
		color: #aaa;
		margin: 0.1rem 0;
		font-size: 0.3rem;
	}

	.mp-realtime-name {
		color: #616161;
	}

	.mp-realtime-price {
		margin-left: 0.2rem;
		color: #ff8300;
		font-size: 0.4rem;
		line-height: 0.54rem;
	}

	.mp-price-num {
	}

	.mp-topic-topleft {
		margin-top: 0.3rem;
		position: relative;
		border-radius: 0.3rem;
		overflow: hidden;
		box-shadow: inset 0 0.04rem 0.12rem 0 rgba(0, 0, 0, 0.2);
	}
	.mp-topic-topleft::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		border: 0.05rem solid #00cabb;
	}

	.mp-topic-topleft .clrfix {
		display: flex;
		flex-wrap: wrap;
		align-content: center;
		justify-content: center;
	}

	.mp-topic-item {
		width: 32%;
		text-align: center;
	}

	.mp-topic-link {
		display: block;
		color: #212121;
		font-size: 0.38rem;
		line-height: 1.4rem;
	}

	.topic-border {
		border-bottom: #f0f0f0 0.05rem solid;
	}
	.topic-border::after {
		container: '';
		position: absolute;
		left: 0;
		top: 50%;
		width: 100%;
		height: 0.05rem;
		background-color: #00cabb;
		transform: translateY(-50%);
	}

	.topic-border-lr {
		border-left: #f0f0f0 0.05rem solid;
		border-right: #f0f0f0 0.05rem solid;
	}

	.mpg-ellipsis {
		overflow: hidden;
		width: 100%;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.mp-nearby {
		margin-top: 0.8rem;
	}
	.mp-tap-container {
		margin-top: 0.5rem;
		position: relative;
	}
	.mp-tab {
		display: flex;
		justify-content: start;
		align-items: center;
		gap: 0.6rem;
	}

	.mp-tab-item {
		text-align: center;
	}

	.mp-tab-active .mp-tab-name {
		color: #212121;
		font-weight: bold;
		font-size: 0.42rem;
		position: relative;
	}

	.mp-tab-active .mp-tab-name::after {
		content: '';
		position: absolute;
		left: 50%;
		bottom: 0;
		transform: translateX(-50%);
		width: 0.9rem;
		height: 0.18rem;
		background-color: #00cabb;
		border-radius: 0.2rem;
		opacity: 0.7;
	}

	.mp-tab-name {
		display: inline-block;
		color: #616161;
		font-size: 0.38rem;
		line-height: 0.4rem;
		transition: all 0.3s;
		width: 1.1rem;
	}

	.mp-tab-name::after {
		transition: all 0.3s;
	}
	.mp-tab-distance {
		color: #9e9e9e;
		font-size: 0.3rem;
		line-height: 0.7rem;
	}

	.mp-nearby-content {
		/* padding-left: 15px; */
		margin-top: 14px;
		min-height: 100px;
	}

	.mp-nearby-swiper {
	}

	.npw-swipe-wrap {
		display: flex;
		gap: 5px;
		overflow: scroll;
		z-index: 9;
	}

	.npw-swipe-item {
		width: 144px;
		height: 100%;
		flex-shrink: 0;
		position: relative;
		overflow: hidden;
	}
	.np-nearby-show {
		width: 100%;
	}

	.swiper-img {
		width: 100%;
		border-radius: 12px;
		vertical-align: top;
	}
	.np-nearby-info {
		position: absolute;
		left: 0;
		bottom: 0;
		min-height: 44px;
		font-size: 14px;
	}

	.np-nearby-name {
		border-radius: 4px;
		background-color: rgba(0, 0, 0, 0.6);
		color: #e3e3f0;
		line-height: 26px;
		padding: 0 7px;
	}

	.np-nearby-price {
		color: rgb(158, 158, 158);
		border-radius: 4px;
		font-size: 12px;
		margin-top: 5px;
		padding: 0 7px;
		line-height: 24px;
		background-color: rgba(0, 0, 0, 0.6);
	}

	.price-text {
		color: rgb(255, 171, 0);
		font-size: 16px;
	}

	.mp-route {
		color: rgb(33, 33, 33);
		margin-top: 40px;
		padding-bottom: 15px;
		font-size: 14px;
	}

	.mp-route-tag {
		line-height: 14px;
		margin: 3px 0 -3px 0;
		display: flex;
		align-items: center;
		justify-content: start;
		gap: 12px;
	}

	.mp-route-tag-unit {
	}

	.mp-route-tag-inner {
		border-radius: 8px;
		box-shadow: 0 0.1rem 0.22rem 0 rgba(0, 0, 0, 0.07);
		font-size: 15px;
		line-height: 48px;
		height: 48px;
		width: 100px;
		position: relative;
	}

	.mp-route-list {
		display: flex;
		flex-direction: column;
		gap: 20px;
		margin-top: 20px;
		align-items: center;
		justify-content: center;
	}
	.mp-route-item {
	}

	.mp-route-link {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 12px;
	}

	.mp-route-show {
		position: relative;
		width: 100px;
		height: 100px;
		box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 6px 0px;
		border-radius: 8px;
		flex-shrink: 0;
	}

	.mp-route-show img {
		display: block;
		border-radius: 8px;
		width: 100%;
		cursor: pointer;
	}

	.mp-route-intro {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		background-image: linear-gradient(
			to right,
			rgba(0, 0, 0, 0.6) 20%,
			rgba(0, 0, 0, 0)
		);
		font-size: 12px;
		line-height: 21px;
		color: #fff;
	}

	.mp-route-info {
		display: flex;
		flex-direction: column;
		justify-content: start;
		align-items: start;
		position: relative;
		height: 100px;
	}

	.mp-route-name {
		overflow: hidden;
		color: rgb(33, 33, 33);
		cursor: pointer;
		font-size: 14px;
		line-height: 20px;
		max-height: 40px;
	}

	.mp-rote-qplusicon {
		position: relative;
		top: -1px;
		margin-right: -5px;
		vertical-align: top;
	}

	.mp-route-param {
		margin-top: 5px;
		font-size: 14px;
		color: rgb(0, 175, 199);
		line-height: 14px;
	}

	.mp-route-score {
		font-size: 13px;
		font-weight: 400;
		line-height: 20px;
		margin-right: -3px;
		color: rgb(97, 97, 97);
	}

	.mp-price-num {
		color: rgb(0, 202, 187);
		font-size: 14px;
		margin-right: 2px;
	}

	.mp-route-count {
		color: rgb(97, 97, 97);
		margin-left: 10px;
		font-size: 13px;
		font-style: normal;
	}

	.mp-route-score {
	}

	.mp-price-num {
		color: rgb(97, 97, 97);
		font-size: 15px;
	}

	.mp-route-departure {
		position: absolute;
		left: 0;
		bottom: 5px;
		color: rgb(158, 158, 158);
		font-size: 12px;
		line-height: 17px;
	}

	.mp-route-price {
		position: absolute;
		right: 0;
		bottom: 3px;
		line-height: 27px;
		color: #9e9e9e;
		font-size: 12px;
	}

	.mp-price {
		color: rgb(255, 131, 0);
		vertical-align: -1px;
	}

	.mp-price .mp-price-num {
		font-size: 20px;
		font-weight: 700;
		color: rgb(255, 131, 0);
	}

	.mp-service {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 999;
		background: rgba(0, 0, 0, 0.85);
	}

	.mp-service .mp-service-title {
		margin: 33px 0 20px 0;
		color: #fff;
		font-size: 20px;
		line-height: 28px;
		text-align: center;
	}

	.mp-service-content {
		padding: 0 22px;
		color: #fff;
		height: 60%;
		overflow-y: auto;
	}

	.mp-service-item {
		position: relative;
		padding: 20px 0;
	}

	.mp-service-img {
		position: absolute;
		left: 0;
		top: 50%;
		width: 58px;
		height: 58px;
		transform: translateY(-50%);
	}
	.mp-service-info {
		padding-left: 73px;
	}
	.mp-service-subtitle {
		margin-bottom: 5px;
		font-size: 16px;
		line-height: 22px;
	}

	.mp-service-desc {
		color: #bebebe;
		font-size: 12px;
		line-height: 17px;
	}

	.mp-service-btn {
		position: absolute;
		width: 100%;
		bottom: 0;
		left: 0;
		padding: 44px 0;
		text-align: center;
	}

	.mp-service-btn .mpg-iconfont {
		color: #a4a4a4;
		font-size: 0.8rem;
	}
</style>
